iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0

開始寫useWindowSize的測試吧
這篇應該比較簡單,應該大概可以自己寫出來了吧
我認為困難的點可能是如何模擬窗口
下面開始講解是怎麼模擬的

  1. let resizeWindow = (x: number, y: number) => { ... };: 這是一個箭頭函數,接受兩個參數,xy,代表窗口的新寬度和高度。
  2. window.innerWidth = x;: 這行設定 window 物件的 innerWidth 屬性為 x。這會模擬改變瀏覽器窗口的寬度。
  3. window.innerHeight = y;: 這行設定 window 物件的 innerHeight 屬性為 y。這會模擬改變瀏覽器窗口的高度。
  4. window.dispatchEvent(new Event("resize"));: 這行會觸發一個名為 "resize" 的新事件。這會模擬用戶調整窗口大小時瀏覽器會觸發的 resize 事件,也就是我們在**useEffect 監聽的resize**事件。
import { renderHook, act } from "@testing-library/react";
import { useWindowSize } from "../src"; // 

describe("useWindowSize", () => {
  // 用於模擬窗口大小的物件
  let resizeWindow = (x: number, y: number) => {
    window.innerWidth = x;
    window.innerHeight = y;
    window.dispatchEvent(new Event("resize"));
  };

	// 應該要回傳正確的窗口大小
  it("should return window size", () => {
    // 初始化窗口大小
    resizeWindow(800, 600);

    const { result } = renderHook(() => useWindowSize());
    expect(result.current.width).toBe(800);
    expect(result.current.height).toBe(600);
  });

	// 調整大小後應該要回傳正確的窗口大小
  it("should update size when window is resized", () => {
    // 初始化窗口大小
    resizeWindow(800, 600);
    const { result } = renderHook(() => useWindowSize());

    act(() => {
      // 改變窗口大小
      resizeWindow(1024, 768);
    });

    expect(result.current.width).toBe(1024);
    expect(result.current.height).toBe(768);
  });
});

上一篇
[Day 8] 今天來個簡單的練習寫useWindowSize
下一篇
[Day 10] 來撰寫useTimeout吧
系列文
React進階班,用typescript與jest製作自己的custom hooks庫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言